<template>
	<gui-page :customHeader="true">
		<template v-slot:gHeader>
			<!-- #ifdef MP -->
			<view style="height:20px;"></view>
			<!-- #endif -->
		</template>
		<template v-slot:gBody>
			<view class="gui-padding">
				<view>
					<logo title="购物车" version="" :issearch="false" @back="handleBack" showback></logo>
				</view>
				<!-- 购物车为空 -->
				<view v-if="shoppingCard.length < 1" style="margin-top:100px;">
					<gui-empty v-if="items == null">
						<template v-slot:img>
							<view class="gui-flex gui-row gui-justify-content-center">
								<text class="gui-icons gui-empty-icon gui-color-gray">&#xe644;</text>
							</view>
						</template>
						<template v-slot:text>
							<text class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">购物车空空如也
								~</text>
						</template>
					</gui-empty>
				</view>
				<!-- 购物车主结构  -->
				<view class="gui-common-line"></view>
				<view v-for="(item, index) in shoppingCard" :key="index">
					<view class="gui-shoppingcard gui-bg-white gui-dark-bg-level-3">
						<view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
							<view class="gui-shopp-name">
								<gui-radio @change="shopChange" :parameter="[index]" :checked="item.checked">
									<text class="gui-text gui-primary-text gui-bold">{{item.shopName}}</text>
								</gui-radio>
							</view>
							<text class="gui-shopp-go gui-text-small gui-icons gui-block gui-color-gray">进店
								&#xe601;</text>
						</view>
						<view style="height:25rpx;"></view>
						<view class="gui-shoppingcard-goods gui-flex gui-row gui-nowrap gui-space-between"
							v-for="(goods, indexItem) in item.items" :key="indexItem">
							<view class="gui-shoppingcard-goods-checkbtn">
								<gui-radio :checked="goods.checked" @change="itemChange"
									:parameter="[index+'-'+indexItem]"></gui-radio>
							</view>
							<image :src="goods.img" mode="widthFix" class="gui-shoppingcard-goods-image"></image>
							<view class="gui-shoppingcard-goods-body">
								<text
									class="gui-shoppingcard-goods-title gui-text gui-primary-text gui-block">{{goods.goodsName}}</text>
								<view class="gui-flex gui-rows gui-space-between">
									<text class="gui-shoppingcard-goods-price gui-block">￥{{goods.price}}</text>
									<view class="gui-shoppingcard-goods-number">
										<gui-step-box :disabled="true" :index="indexItem" :datas="[index+'']"
											:value="goods.count" :maxNum="100" :minNum="1"
											@change="numberChange"></gui-step-box>
									</view>
								</view>
								<text class="gui-shoppingcard-remove gui-block gui-icons gui-color-gray"
									@tap="removeGoods" :id="'removeIndex_' + index + '_' + indexItem">&#xe62a; 删除</text>
							</view>
						</view>
					</view>
					<view class="gui-common-line"></view>
				</view>
				<!-- 购物车底部 -->
				<view style="height:120rpx;"></view>
				<view class="gui-shoppingcard-footer gui-bg-gray gui-dark-bg-level-1 gui-border-box gui-border-t">
					<view class="gui-flex gui-row gui-space-between gui-align-items-center">
						<view class="gui-shoppingcard-checkbtn gui-flex grace-nowrap">
							<gui-radio :checked="true" @change="itemChangeAll">
								<text class="gui-text gui-primary-text">{{selectText}}</text>
							</gui-radio>
						</view>
						<view class="gui-shoppingcard-count gui-flex gui-row gui-nowrap">
							<text class="gui-text gui-primary-text">合计 :</text>
							<text style="font-size:32rpx;" class="gui-color-red">￥{{totalprice}}</text>
						</view>
						<text class="gui-shoppingcard-checkout gui-bg-red gui-block gui-color-white"
							@tap="checkout">立即结算</text>
					</view>
					<!-- 如果购物车处于switch页面，请删除下面的组件 -->
					<view>
						<gui-iphone-bottom></gui-iphone-bottom>
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>
<script>
	export default {
		data() {
			return {
				// 总价
				totalprice: '',
				// 选择文本
				selectText: '全选',
				// 购物车数据 可以来自 api 请求或本地数据
				shoppingCard: [{
						"checked": true,
						"shopName": "hcoder 官方店",
						"shopId": "1",
						"items": [{
								"goodsId": 1,
								"goodsName": "hcoder 演示商品",
								"price": 10.00,
								"count": 1,
								"img": "https://m.360buyimg.com/babel/jfs/t1/3730/7/3438/394579/5b996f2eE1727c59e/373cf10d42a53b72.jpg",
								"checked": true
							},
							{
								"goodsId": 2,
								"goodsName": "dcloud 演示商品",
								"price": 20.00,
								"count": 1,
								"img": "https://img14.360buyimg.com/n7/jfs/t1/1156/8/14017/123589/5bd9a4e8E7dbd4a15/70fbbccdf8811111.jpg",
								"checked": true
							}
						]
					},
					{
						"checked": true,
						"shopName": "grace 官方旗舰店",
						"shopId": "2",
						"items": [{
							"goodsId": 3,
							"goodsName": "uni-app 演示商品",
							"price": 30.00,
							"count": 2,
							"img": "https://img10.360buyimg.com/n7/jfs/t19690/263/1947634738/190301/ad172397/5adfe5eaN42591f8c.jpg",
							"checked": true
						}]
					}
				]
			}
		},
		onLoad: function() {
			// 初始化时候计算总价，如果使用api 获取购物车项目在 api 请求完成后执行此函数
			this.countTotoal();
		},
		methods: {
			//计算总计函数
			countTotoal: function() {
				var total = 0;
				for (var i = 0; i < this.shoppingCard.length; i++) {
					for (var ii = 0; ii < this.shoppingCard[i].items.length; ii++) {
						if (this.shoppingCard[i].items[ii].checked) {
							total += Number(this.shoppingCard[i].items[ii].price) * Number(this.shoppingCard[i].items[
								ii].count);
						}
					}
				}
				this.totalprice = total;
			},
			numberChange: function(data) {
				this.shoppingCard[data[2]].items[data[1]].count = data[0];
				//计算总价
				this.countTotoal();
			},
			removeGoods: function(e) {
				var index = e.currentTarget.id.replace('removeIndex_', '');
				index = index.split('_');
				var index1 = Number(index[0]);
				var index2 = Number(index[1]);
				uni.showModal({
					title: '确认提醒',
					content: '您确定要移除此商品吗？',
					success: (e) => {
						if (e.confirm) {
							this.shoppingCard[index1].items.splice(index2, 1);
							// 是否全部删除包含商铺
							if (this.shoppingCard[index1].items.length < 1) {
								this.shoppingCard.splice(index1, 1);
							}
							//计算总价
							this.countTotoal();
						}
					}
				})
			},
			checkout: function() {
				uni.showToast({
					title: '计算的数据保存在 shoppingCard 变量内 ^_^',
					icon: "none"
				})
			},
			// 店铺选中按钮状态切换
			shopChange: function(e) {
				var index = Number(e[1]);
				this.shoppingCard[index].checked = e[0];
				for (let i = 0; i < this.shoppingCard[index].items.length; i++) {
					this.shoppingCard[index].items[i].checked = e[0];
				}
				this.shoppingCard.splice(index, this.shoppingCard[index]);
				this.countTotoal();
			},
			// 商品选中
			itemChange: function(e) {
				var indexs = e[1].toString();
				var index = indexs.split('-');
				index[0] = Number(index[0]);
				index[1] = Number(index[1]);
				this.shoppingCard[index[0]].items[index[1]].checked = e[0];
				this.shoppingCard.splice(index[0], this.shoppingCard[index[0]]);
				var checkedNum = 0;
				for (let i = 0; i < this.shoppingCard[index[0]].items.length; i++) {
					if (!this.shoppingCard[index[0]].items[i].checked) {
						checkedNum++;
					}
				}
				if (checkedNum < 1) {
					this.shoppingCard[index[0]].checked = true;
				} else {
					this.shoppingCard[index[0]].checked = false;
				}
				this.shoppingCard = this.shoppingCard;
				this.countTotoal();
			},
			itemChangeAll: function(e) {
				this.selectText = e[0] ? '全选' : '全不选';
				for (var i = 0; i < this.shoppingCard.length; i++) {
					this.shoppingCard[i].checked = e[0];
					for (var ii = 0; ii < this.shoppingCard[i].items.length; ii++) {
						this.shoppingCard[i].items[ii].checked = e[0];
					}
				}
				this.countTotoal();
			},
			handleBack(){
				uni.navigateBack({delta:1})
			}
		}
	}
</script>
<style scoped lang="scss">
	page {
		background: #f8f8f8;
	}

	.gui-shoppingcard {
		border-radius: 8rpx;
		padding: 20rpx 30rpx;
	}

	.gui-shopp-name {
		width: 200rpx;
		flex: 1;
	}

	.gui-shopp-go {
		width: 120rpx;
		text-align: right;
	}

	.gui-shoppingcard-goods {
		margin: 10rpx 0;
	}

	.gui-shoppingcard-goods-checkbtn {
		width: 60rpx;
	}

	.gui-shoppingcard-goods-image {
		width: 120rpx;
		margin-right: 20rpx;
	}

	.gui-shoppingcard-goods-body {
		width: 400rpx;
		flex: 1;
		overflow: hidden;
	}

	.gui-shoppingcard-goods-title {
		line-height: 50rpx;
	}

	.gui-shoppingcard-goods-price {
		color: #FF0036;
		font-size: 32rpx;
	}

	.gui-shoppingcard-goods-number {
		padding: 2px 0;
	}

	.gui-shoppingcard-remove {
		text-align: right;
		line-height: 50rpx;
		margin-top: 20rpx;
		font-size: 24rpx;
	}

	.gui-shoppingcard-footer {
		position: fixed;
		z-index: 99;
		left: 0;
		bottom: 0;
		width: 750rpx;
		padding-left: 30rpx;
	}

	.gui-shoppingcard-checkbtn {
		width: 200rpx;
	}

	.gui-shoppingcard-count {
		width: 200rpx;
		flex: 1;
	}

	.gui-shoppingcard-checkout {
		width: 260rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		text-align: center;
	}

	/* 如果购物车放在 switch 页面并且是 h5 端请打开注释启用下面的样式 */
	/* #ifdef H5 */
	/* .gui-shoppingcard-footer{bottom:50px;} */
	/* #endif */
</style>